import {} from 'antd';
import { useEffect, useRef, useState } from 'react';
import { ToolTwoTone, EyeTwoTone } from '@ant-design/icons';
import { getBgs } from 'api/material';
import ImageView, { ImageViewMethods } from 'components/ImageView';
import { connect } from 'react-redux';
import { updateConf } from '@redux/conf/action';
import Header from 'components/ReturnHeader';

const BASE_IMAGE = import.meta.env.VITE_IMG_URL as string;

export default connect((state: any) => state.conf, { updateConf })(function (props: {
	bg_url: string;
	updateConf: Function;
}) {
	const [materials, setmaterials] = useState<any>([]);
	const previewRef = useRef<ImageViewMethods>();
	useEffect(() => {
		getBgs({ size: 9999 }).then(({ list }: any) => {
			setmaterials(list);
		});
	}, []);

	return (
		<div className=''>
			<Header title='背景图配置' />
			<div className=' flex flex-wrap gap-3  p-4'>
				{materials.map(({ name, content }: any) => (
					<div
						key={content}
						className={`cursor-pointer w-28 rounded-lg p-2 flex flex-col ${
							props.bg_url === content ? 'bg-red-100' : 'bg-blue-100'
						}`}>
						<p className=' font-mono font-bold text-xl text-blue-500'>{name}</p>
						<div className=' mt-auto ml-auto'>
							<i
								className=' icon-class'
								title='使用'
								onClick={() => {
									props.updateConf({ bg_url: content });
								}}>
								<ToolTwoTone />
							</i>
							<i
								className=' icon-class'
								title='预览'
								onClick={() => {
									previewRef.current!.preview({ src: BASE_IMAGE + content });
								}}>
								<EyeTwoTone />
							</i>
						</div>
					</div>
				))}
			</div>
			<ImageView innerRef={previewRef} />
		</div>
	);
});
